<template>
  <!-- 预览弹框 -->
  <div class="container">
    <el-row :gutter="20" class="elrow">
      <el-col :span="6"
        >【题型】:<span>{{
          formatterQuestionType(DetailsObj.questionType)
        }}</span></el-col
      >
      <el-col :span="6"
        >【编号】:<span>{{ DetailsObj.id }}</span></el-col
      >
      <el-col :span="6"
        >【难度】:<span>{{
          formatterDifficulty(DetailsObj.difficulty)
        }}</span></el-col
      >
      <el-col :span="6"
        >【标签】:<span v-html="DetailsObj.tags"></span
      ></el-col>
    </el-row>
    <el-row :gutter="20" class="elrow">
      <el-col :span="6"
        >【学科】:<span>{{ DetailsObj.subjectName }}</span></el-col
      >
      <el-col :span="6"
        >【目录】:<span>{{ DetailsObj.directoryName }}</span></el-col
      >
      <el-col :span="6"
        >【方向】:<span>{{ DetailsObj.direction }}</span></el-col
      >
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col>
        【题干】:<span v-html="DetailsObj.question" class="text"></span>
        <!-- 单选 -->
        <div v-if="DetailsObj.questionType === '1'">
          <p>单选题 选项：（以下选中的选项为正确答案）</p>
          <el-radio
            @change="label = 1"
            v-for="item in DetailsObj.options"
            :key="item.id"
            :label="item.isRight"
            v-model="label"
          >
            {{ item.title }}
          </el-radio>
        </div>
        <!-- 多选 -->
        <div v-if="DetailsObj.questionType === '2'">
          <p>多选题 选项：（以下选中的选项为正确答案）</p>
          <el-checkbox
            v-model="checkList"
            @change="checkList = [1]"
            v-for="item in DetailsObj.options"
            :key="item.id"
            :label="item.isRight"
            >{{ item.title }}</el-checkbox
          >
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col
        >【参考答案】:<el-button type="danger" @click="videoFn"
          >视频答案预览</el-button
        ><br />
        <video
          :src="DetailsObj.videoURL"
          controls="controls"
          autoplay
          v-if="play"
          width="70%"
        ></video>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col
        >【答案解析】:<span v-html="DetailsObj.answer" class="dajx"></span
      ></el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col
        >【题目备注】:<span>{{ DetailsObj.remarks }}</span></el-col
      >
    </el-row>

  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'QuestionsPreview',
  props: {
    DetailsObj: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      label: 1,
      play: false,
      checked: 1,
      checkList: [1]
    }
  },
  created () {},
  methods: {
    // 视频答案预览按钮
    videoFn () {
      this.play = true
    },
    //  转换题型
    formatterQuestionType (type) {
      const obj = questionType.find((item) => item.value === Number(type))
      return obj ? obj.label : ''
    },
    // 转换难度
    formatterDifficulty (diff) {
      const obj = difficulty.find((item) => item.value === Number(diff))
      return obj ? obj.label : ''
    }
  }
}
</script>

<style scoped >
.el-radio {
  display: block;
}
.el-checkbox {
  display: block;
}
.text {
  color: blue;
}
.dajx{
    display: inline-block;
}

.elrow {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 20px;
}
</style>
